<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-04-13 
 -->


<template>
  <el-drawer v-drag:classList="{head: 'el-drawer__header', wrap: 'el-drawer__container'}" :visible.sync="visible" direction="rtl" :withHeader="true" size="100%" :modal-append-to-body="true" :show-close="false" :close-on-press-escape="false" :modal="false" :wrapperClosable="false"
    @close="closeChange">

    <template #title>
      <el-alert v-if="visible" class="select-none" show-icon type="info" :closable="true" effect="dark" :title="panelHeadTitle" :description="panelTip" @close="$emit('update:visible', false)" />
    </template>

    <el-card class="h-full" :body-style="{height: '100%', paddingLeft: 0}">
      <el-row>
        <el-form ref="form" :model="form" label-width="80px" size="mini">

          <el-form-item label="操作">
            <el-button type="primary" icon="el-icon-position">选择</el-button>
            <el-button type="warning" icon="el-icon-rank">平移</el-button>
            <el-button type="success" icon="el-icon-share">节点操作</el-button>
            <el-button type="danger" icon="el-icon-delete">删除</el-button>
          </el-form-item>

          <el-form-item label="模型名称">
            <el-input v-model="form['label-shape'].text" placeholder="请输入节点名称" @change="changeEmit('label-shape')" />
          </el-form-item>

          <el-col class="flex">

            <el-form-item label="背景颜色">
              <el-color-picker v-model="form['shape'].fill" show-alpha :predefine="predefineColors" @change="changeEmit('shape')" />
            </el-form-item>

            <el-form-item v-if="['triangle-node', 'diamond-node', 'modelRect-node', 'rect-node'].includes(form['shape'].type)" label="宽" class="flex-1">
              <el-slider v-model="form['shape'].width" :min="30" :max="360" @input="changeEmit('shape')" />
            </el-form-item>

            <el-form-item v-if="['triangle-node', 'diamond-node', 'modelRect-node', 'rect-node'].includes(form['shape'].type)" label="高" class="flex-1">
              <el-slider v-model="form['shape'].height" :min="30" :max="360" @input="changeEmit('shape')" />
            </el-form-item>

            <el-form-item v-if="['triangle-node'].includes(form['shape'].type)" class="flex-2">
              <el-radio-group v-model="form['shape'].direction" @input="changeEmit('shape')">
                <el-radio-button label="up">上</el-radio-button>
                <el-radio-button label="down">下</el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="['circle-node', 'icon-node'].includes(form['shape'].type)" label="半径" class="flex-1">
              <el-slider v-model="form['shape'].r" :min="30" :max="360" @input="changeEmit('shape')" />
            </el-form-item>

            <el-form-item v-if="form['shape'].type === 'ellipse-node'" label="短轴" class="flex-1">
              <el-slider v-model="form['shape'].rx" :min="30" :max="360" @input="changeEmit('shape')" />
            </el-form-item>

            <el-form-item v-if="form['shape'].type === 'ellipse-node'" label="长轴" class="flex-1">
              <el-slider v-model="form['shape'].ry" :min="30" :max="360" @input="changeEmit('shape')" />
            </el-form-item>

          </el-col>

          <el-col class="flex">

            <el-form-item label="字体颜色">
              <el-color-picker v-model="form['label-shape'].fill" show-alpha :predefine="predefineColors" @change="changeEmit('label-shape')" />
            </el-form-item>

            <el-form-item label="字体大小" class="flex-1">
              <el-slider v-model="form['label-shape'].fontSize" :min="12" :max="36" @change="changeEmit('label-shape')" />
            </el-form-item>

          </el-col>

          <el-col class="flex" v-if="['icon-node'].includes(form['shape'].type)">

            <el-form-item label="图标颜色">
              <el-color-picker v-model="form['icon-shape'].fill" show-alpha :predefine="predefineColors" @change="changeEmit('icon-shape')" />
            </el-form-item>

            <el-form-item label="图标大小" class="flex-1">
              <el-slider v-model="form['icon-shape'].fontSize" :min="30" :max="90" @input="changeEmit('icon-shape')" />
            </el-form-item>

            <el-form-item label="图标" class="flex-1">

              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">

                <IconSelect ref="iconSelect" @selected="selected" />

                <el-input slot="reference" v-model="form['shape'].icon" placeholder="点击选择图标" readonly>

                  <i v-if="form['shape'].icon" slot="prefix" class="iconfont" style="color: 409eff;height: 30px;width: 16px;">{{ getIcon(form['shape'].icon) }}</i>
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />

                </el-input>

              </el-popover>

            </el-form-item>

          </el-col>

        </el-form>
      </el-row>
    </el-card>

  </el-drawer>
</template>

<script>
import { each, throttle, debounce, getType } from '@antv/util';
import IconSelect from "@/components/IconSelect";
import { getIcon } from "@/utils";

export default {
  name: 'Drawer',
  components: { IconSelect },
  data() {
    return {
      getIcon,
      panelHeadTitle: "",
      panelTip: "",
      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577'],
      form: {
        shape: {},
        'label-shape': {},
        'icon-shape': {},
      }
    };
  },
  props: {
    visible: { type: Boolean, required: true },
    graphNode: { type: Object, required: true },
    graph: { type: Object, required: true },
  },
  mounted() { },

  methods: {
    decompose() {
      const { graphNode } = this;

      each(graphNode.get('group').get('children'), child => {

        if (child.get('name') === 'anchor-group' || child.get('name') === 'anchor') return;

        switch (child.get('name')) {

          case 'label-shape':
            this.form['label-shape'] = child.get('attrs');
            break;

          case 'icon-shape':
            this.form['icon-shape'] = child.get('attrs');
            break;

          case 'circle-shape':
            this.form['shape'] = child.get('attrs');
            break;

          case 'path-shape':
            this.form['shape'] = child.get('attrs');
            break;

          case 'ellipse-shape':
            this.form['shape'] = child.get('attrs');
            break;

          case 'rect-shape':
            this.form['shape'] = child.get('attrs');
            break;

          default:
            break;
        }

      });

    },
    changeEmit(type) {
      const { graphNode, graph } = this;

      each(graphNode.get('group').get('children'), child => {
        if (child.get('name') === 'anchor-group' || child.get('name') === 'anchor') return;

        if (child.get('name') === type) {
          child.attr(this.form[type]);
          return;
        }

        if (type === 'shape' && /circle|path|ellipse|rect(-shape)$/.test(child.get('name'))) {
          if (child.get('attrs').type === 'diamond-node') {

            const { width, height } = this.form[type];
            child.attr({ path: [['M', 0, -height], ['L', width, 0], ['L', 0, height], ['L', -width, 0], ['Z']] });

          } else if (child.get('attrs').type === 'triangle-node') {

            const direction = child.get('attrs').direction || 'up';
            const { width, height } = this.form[type];
            const path = [['Z']];
            if (direction === 'up') path.unshift(['M', 0, -height], ['L', -width, 0], ['L', width, 0]);
            else path.unshift(['M', 0, height], ['L', -width, 0], ['L', width, 0]);

            child.attr({ ...this.form[type], path });

          } else {
            child.attr(this.form[type]);
          }

        }
      });
      graph.updateItem(graphNode, graphNode.getModel(), true);
    },
    selected(item) {
      this.form['icon-shape'].icon = item.label;
      this.form['icon-shape'].text = getIcon(item.label);
      this.changeEmit('icon-shape');
    },
    closeChange() {
      Object.assign(this.$data.form, this.$options.data().form);
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val) {
        this.decompose();
      } else {
        this.graph.setItemState(this.graphNode, 'selected', false);
      }
    }
  },
  //  End
}

</script>

<style lang='scss' scoped>
.el-drawer__wrapper {
  user-select: none;
  pointer-events: none;
  /deep/ .el-drawer__container {
    pointer-events: auto;
    width: 30%;
    right: unset;
    bottom: unset;
    height: unset;
    .el-drawer {
      height: unset;
      bottom: unset;
      .el-drawer__header {
        margin-bottom: 16px;
      }
    }
  }
  /deep/ .el-alert__description {
    line-height: 25px;
    margin: 0;
  }
}
</style>
